<template>
  <div class="flex justify-center items-center">
    <h3 class="text-2xl font-medium">{{ $t("ticketSales.ticketSales") }}</h3>
  </div>
  <div class="flex justify-start items-start mt-10">
    <div class="w-[50%] h-[350px] flex justify-center items-center pt-40">
      <img src="@/assets/images/TicketSales/sale.png" alt="" />
    </div>
    <ul class="saleContent">
      <li v-for="(item, index) of list" :key="index">
        <div class="flex flex-col justify-start items-start">
          <div class="flex justify-start items-center">
            <img :src="getImgUrl(item.imgUrl)" alt="" width="15" />
            <h3 class="font-medium ml-2">{{ item.title }}</h3>
          </div>
          <div class="mt-2">
            <p class="text-sm text-[#636567]">{{ item.text }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const list = computed(() => {
  return [
    {
      title: t("ticketSales.SearchEngin"),
      text: t("ticketSales.SearchEnginTip"),
      imgUrl: "../../../assets/images/TicketSales/icon1.png",
    },
    {
      title: t("ticketSales.payment"),
      text: t("ticketSales.paymentTip"),
      imgUrl: "../../../assets/images/TicketSales/icon2.png",
    },
    {
      title: t("ticketSales.order"),
      text: t("ticketSales.orderTip"),
      imgUrl: "../../../assets/images/TicketSales/icon3.png",
    },
  ];
});
const getImgUrl = (url) => {
  return new URL(url, import.meta.url).href;
};
</script>
<style lang="scss" scoped>
.saleContent {
  width: 50%;
  li {
    width: 100%;
    min-height: 140px;
    background: #f3f6fd;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 15px;
  }
}
</style>
